<div class="crud_item">
  <h1>Создание публикаций</h1>
  <div class="controll_panel">
    <div id="create_button">Создать</div>
  </div>
  <div id="list_item">
  </div>
 </div>
<script type="text/javascript">
$(document).ready(function (){
  
getItem();
   
 function getItem(){
    $.getJSON('<?php echo base_url();?>item/read/')
      .done(function(item){
        $.getJSON('<?php echo base_url();?>category/read/',function(category){
          var str = '<table>';
          str += '<th>ID</th>';
          str += '<th>Категория</th>';
          str += '<th>Название</th>';
          str += '<th>Где и Когда</th>';
          str += '<th>Описание</th>';
          str += '<th>Иформания о пользователе</th></thead><tbody>';
          
          var catM = [];
          $.each(category, function(key,data){
            catM[data.id] = data.name;
          });
         $.each(item, function(key,data){
           str += '<tr class="row">';
           str += '<td class="id">'+data.id+'</td>';
           str += '<td class="category">'+catM[data.categoryId]+'|'+data.categoryId+'</td>';
           str += '<td class="name">'+data.name+'</td>';
           str += '<td class="location_date">'+data.locationAndDate+'</td>';
           str += '<td class="description">'+data.description+'</td>';
           str += '<td class="info">'+data.userInfo+'</td>';
           str +='<td class="edit" data-id="'+data.id+'" data-name="'+data.name+'" data-locationAndDate="'+data.locationAndDate+'" data-description="'+data.description+'" data-userInfo="'+data.userInfo+'" data-categoryId="'+data.categoryId+'">Edit</td>';
           str +='<td class="delete" data-item="'+data.id+'">Delete</td></tr>';
         })
          str += '</tbody></table>';
          $('#list_item').html('');
          $('#list_item').append(str);
          
          
          $(".edit").click(function(){
          var param = {
                                     id: $(this).data('id'),
                                     name: $(this).data('name'),
                                     categoryId: $(this).data('categoryid'),
                                     locationAndDate: $(this).data('locationanddate'),
                                     description: $(this).data('description'),
                                     userInfo: $(this).data('userinfo')
                                   };
            createForm('editItem', param);
          });
          $(".delete").click(function(){
           $('#view_container').remove();
            var posting =  $.post('<?php echo base_url();?>item/delete/', {id:$(this).data('item')});
            posting.done(function (data){
            var anser = JSON.parse(data);
                if(anser.code){
                  clearList();
                  getItem();

                }
            });
          });
      
      
        });
        
      });
  }  
 function createForm(param,data){
      switch(param){
        case 'createItem':
           buildCreateForm();
        break;
        case 'editItem':
            buildEditForm(data);
        break;
      }
 }
function buildCreateForm(){
       $.getJSON('<?php echo base_url();?>category/read/',function(json){
         var string  ='';
         string += '<div id="view_container">';
         string += '<div id="view_edit_close" style="width: 30px; height: 30px; background: green;left: 270px; position: relative;"></div>';
         string += '<div id="view_edit" style="width: 300px; height: 300px; background: grey;">';
         string += '<div id="preloader"><img src="<?php echo base_url();?>img/preloader.gif"></div>';
         string += '<form id="create_item_form" action="<?php echo base_url();?>item/create/" method="post" style="display: none;">';
         string += '<label>Название</label>';
         string += '<input type="text" name="name" placeholder="Название">';
         string += '<label>Категория</label>';
         string += createSelect('category', json, 0);
         string += '<label>Где и Когда</label>';
         string += '<textarea  name="locationAndDate" placeholder="Где и Когда"></textarea>';
         string += '<label>Опишите подробнее</label>';
         string += '<textarea name="description" placeholder="Опишите подробнее"></textarea>';
         string += '<label>Контактные данные</label>';
         string += '<textarea name="userInfo" placeholder="Контактные данные"></textarea>';
         string +='</select><input id="submit" type="submit" value="Отправить"></form>';
         string += '</div>';
         $('body').append(string);
         //init
         $('select[name="category"]').after($(createSelect('categoryId', json, parseInt($('select[name="category"]').val()))));
         //change
         $('select[name="category"]').change(function(){
           $('select[name="categoryId"]').remove();
           $('select[name="category"]').after($(createSelect('categoryId', json, parseInt($('select[name="category"]').val()))));
         });
         //прячем прелодер
         $('#preloader').hide();
         // показываем форму
         $('#create_item_form').show();
         //ловим событие отправки сообщения
         $('#create_item_form').submit(function (event){
            // отменяем стандартную отправку данных
            event.preventDefault();
            $('#create_item_form').hide();
            $('#preloader').show();
            var posting =  $.post('<?php echo base_url();?>item/create/', {
                                     name: ''+$('input[name="name"]').val(),
                                     categoryId: ''+$('select[name="categoryId"]').val(),
                                     locationAndDate: ''+$('textarea[name="locationAndDate"]').val(),
                                     description: ''+$('textarea[name="description"]').val(),
                                     userInfo: ''+$('textarea[name="userInfo"]').val() 
                                   });
            
            posting.done(function (data){
            $('#preloader').hide();
            var anser = JSON.parse(data);
            if(anser.code){
              $('#view_container').remove();
              buildCreateForm();
              clearList();
              getItem();
            }
          });
         });
         
         $('#view_edit_close').click(function(){
            //clearViewEdit();
         $('#view_container').remove();
         });
      });      
    }
function buildEditForm(param){
      $.getJSON('<?php echo base_url();?>category/read/',function(json){
         var string  ='';
         var catM = [];
          $.each(json, function(key,data){
            catM[data.id] = data.parent;
          });
         string += '<div id="view_container">';
         string += '<div id="view_edit_close" style="width: 30px; height: 30px; background: green;left: 270px; position: relative;"></div>';
         string += '<div id="view_edit" style="width: 300px; height: 300px; background: grey;">';
         string += '<div id="preloader"><img src="<?php echo base_url();?>img/preloader.gif"></div>';
         string += '<form id="create_item_form" action="<?php echo base_url();?>item/create/" method="post" style="display: none;">';
         string += '<input type="hidden" name="id"  value="'+param.id+'">';
         string += '<label>Название</label>';
         string += '<input type="text" name="name" placeholder="Название" value="'+param.name+'">';
         string += '<label>Категория</label>';
         string += createSelect('category', json, 0, parseInt(catM[param.categoryId]));
         string += '<label>Где и Когда</label>';
         string += '<textarea  name="locationAndDate" placeholder="Где и Когда">'+param.locationAndDate+'</textarea>';
         string += '<label>Опишите подробнее</label>';
         string += '<textarea name="description" placeholder="Опишите подробнее">'+param.description+'</textarea>';
         string += '<label>Контактные данные</label>';
         string += '<textarea name="userInfo" placeholder="Контактные данные">'+param.userInfo+'</textarea>';
         string +='</select><input id="submit" type="submit" value="Отправить"></form>';
         string += '</div>';
         $('body').append(string);
         //init
         $('select[name="category"]').after($(createSelect('categoryId', json, parseInt($('select[name="category"]').val()) , parseInt(param.categoryId))));
         //change
         $('select[name="category"]').change(function(){
           $('select[name="categoryId"]').remove();
           $('select[name="category"]').after($(createSelect('categoryId', json, parseInt($('select[name="category"]').val()), parseInt(param.categoryId) )));
         });
         //прячем прелодер
         $('#preloader').hide();
         // показываем форму
         $('#create_item_form').show();
         //ловим событие отправки сообщения
         $('#create_item_form').submit(function (event){
            // отменяем стандартную отправку данных
            event.preventDefault();
            $('#create_item_form').hide();
            $('#preloader').show();
            var posting =  $.post('<?php echo base_url();?>item/update/', {
                                     id: ''+$('input[name="id"]').val(),
                                     name: ''+$('input[name="name"]').val(),
                                     categoryId: ''+$('select[name="categoryId"]').val(),
                                     locationAndDate: ''+$('textarea[name="locationAndDate"]').val(),
                                     description: ''+$('textarea[name="description"]').val(),
                                     userInfo: ''+$('textarea[name="userInfo"]').val() 
                                   });
            
            posting.done(function (data){
            $('#preloader').hide();
            var anser = JSON.parse(data);
            if(anser.code){
              $('#view_container').remove();
              clearList();
              getItem();
            }
          });
         });
         
         $('#view_edit_close').click(function(){
            //clearViewEdit();
         $('#view_container').remove();
         });
      });
    }  
function clearList(){
      $('#list_item').html('');
    }
function createListOption(list, level,idSelected){
    if(typeof list != "undefined" ){
      var elements ='';
      var select = '';
    $.each(list, function(key,data){
      if(data.id ==  idSelected && idSelected != 'undefined'){
        select = 'selected';
      }
      else select = '';
      if(data.parent == level)
        elements += '<option value="'+data.id+'" '+select+'>'+data.name+'</option>';
    });
    return elements;
  }
  }
function createSelect(name,list,level,idSelected){
    if(typeof name != 'undefined'){
      return '<select name="'+name+'">'+createListOption(list,level,idSelected)+'</select>';
    }
  }
   
$("#create_button").click(function(){
    createForm('createItem');
  });
  
});

</script>